Day7 圖片標籤

2024 iThome 鐵人賽

DAY 7

佛心分享-IT 人自學之術

新手踏入網頁前端的世界系列第 7 篇

16th鐵人賽

zhiz

2024-09-11 23:14:14

121 瀏覽

分享至

今天要介紹如何透過標籤來調整圖片的高度、寬度、框線

`<img>`標籤

功用是將圖檔插入網頁中。
以下介紹其屬性：

src 代表圖片的來源，是source的縮寫。
border 設定圖片框線的粗細。
width 設定圖片寬度(像素)。
height設定圖片高度(像素) 。

實作範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圖片編輯</title>
</head>
<body>
    <img src="sunrise.jpg" height="250" width="300" border="3">
    
    
</body>
</html>

接下來介紹圖片的對齊

透過設定align或是valign屬性，讓圖片的排版更加美觀與整齊。

align 設定水平對齊位置，如：置左(left)、置中(center) 、置右(right)。
valign 設定垂直對齊位置，如：置頂(top)、置中(middle) 、置底(bottom)。

實作範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圖片編輯</title>
</head>
<body>
    <img src="sunrise.jpg" height="300" width="450" align="right">
    <h2>日出</h2>
    <p>這是我在宜蘭清晨5點拍的日出照片</p>
    
    
</body>
</html>